<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem href="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="/configs/">系统配置</BreadcrumbItem>
			    <BreadcrumbItem href="/configs/admin">后台用户管理</BreadcrumbItem>
			    <BreadcrumbItem :href="url">用户更新</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<IForm :model="form" ref="form" :label-width="100" :rules="formRule" >
		    		<IInput v-model="form.id" class="hide" />
		    		<FormItem prop="name" label="用户名">
			            <IInput v-model="form.name" size="large" placeholder="用户名,纯英文" v-bind:disabled="form.nameDisabled" />
			        </FormItem>
			        <FormItem prop="password" label="密码">
			            <IInput v-model="form.password" size="large" placeholder="请输入密码" type="password" />
			        </FormItem>
					<FormItem prop="isMaster" label="是否超级管理员">
			            <ISwitch v-model="form.isMaster">
			            	<span slot="open">是</span>
        					<span slot="close">否</span>
			            </ISwitch>
			            <Alert type="warning" closable show-icon style="display:inline">超级管理员一旦添加,无法被更新,无法查看,请谨慎操作!</Alert>
			        </FormItem>

			        <FormItem prop="roles" label="角色">
			           	<CheckboxGroup v-model="form.roles"  @on-change="checkAllGroupChange">
			        			<Checkbox v-for="(checkbox,index) in checkBoxs" :key="checkbox.id" :label="checkbox.id" >{{checkbox.txt}}</Checkbox>	
					    </CheckboxGroup>
			        </FormItem>
			        <FormItem>
			        	<Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">角色全选</Checkbox>
			        </FormItem>
			        <FormItem>
			        	<IButton type="primary" @click="submit('form')">提交</IButton>
			        </FormItem>
		    	</IForm>
		    </div>
		</div>
	</div>
</template>
<script>
	import Breadcrumb from 'iview/src/components/breadcrumb';
	import Form from 'iview/src/components/form';
    import Input from 'iview/src/components/input';
    import Button from 'iview/src/components/button';
    import Checkbox from 'iview/src/components/checkbox';
    import Switch from 'iview/src/components/switch';
    import Alert from 'iview/src/components/alert';

    import Axios from 'admin/config/axios';

	export default{
		data () {
			const validateName=(rule , value ,callback)=>{
	            var reg = /^[A-Za-z]+$/;
	            if(!reg.test(value)){
	                callback(new Error('请填写合法角色英文名'));
	            }
	            var _this = this;
	            Axios.Configs.Admin.CheckName({name:value,id:this.form.id})
	            .then(res =>{
	            	if(!res) return false;
	                callback();
	            })
	        };

	        const validatePwd = (rule , value ,callback)=>{
	            if(this.form.id>0){
	            	callback();
	            }
	            if(value==''){
	            	callback(new Error('请填写密码'));
	            }
	            if(value.length<6){
	            	callback(new Error('密码最少6位'));	
	            }
	            callback();
	        };

            return {
                form :{
					id : 0,
					name : '',
					nameDisabled : false,
					password  : '',
					isMaster : false ,
					roles : [],
                },
                checkBoxs : [],
                indeterminate: false,
				checkAll: false,
				url : '/configs/admin/update',
				formRule: {
	                name: [
	                    { required: true, message: '请填写角色英文名', trigger: 'blur' },
	                    { validator: validateName, trigger: 'blur'}
	                ],
	                password: [
	                    { validator: validatePwd, trigger: 'blur'}
	                ],
	                roles: [
	                	{ required: true, message: '请至少选择一个角色'}
	                ]
	            }
            }
        },
		components:{
            Breadcrumb,
            "BreadcrumbItem" : Breadcrumb.Item,
            'IInput' : Input,
			'IForm' : Form,
			'FormItem' : Form.Item,
			'IButton' : Button,
			Checkbox,
			"CheckboxGroup" : Checkbox.Group,
			"ISwitch" : Switch,
			Alert,
        },
        methods: {
        	submit(name){
        		this.$refs[name].validate((valid) => {
	                if (!valid) {
	                    return false;
	                }
	                Axios.Configs.Admin.Update(this.form)
		            .then(res =>{
		                if(!res) return false;
		                this.$router.go(-1);
		            })
	            })
        	},
        	handleCheckAll () {
                if (this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;

                if (this.checkAll) {
                	var all = [];
                	var boxs = this.checkBoxs;
                	for(var i in boxs){
                		all.push(boxs[i]['id']);
                	}
                    this.form.roles = all;
                } else {
                    this.form.roles = [];
                }
            },
        	checkAllGroupChange (data) {
        		if(data==undefined) return false;
                if (data.length === this.checkBoxs.length) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            }
        },
        created: function() {
        	this.$Loading.start();
        	//获取所有角色
        	Axios.Configs.Admin.AllRole()
            .then(res =>{
                if(!res) return false;
                var data = res.data;
               	for(var i in data){
                	this.checkBoxs.push({
		        		'id': data[i]['id'],
		        		'txt' : data[i]['displayName'],
		        	})
                }
                this.checkAllGroupChange(this.form.permissions);
            })
        	
	        //面包屑导航路径赋值
	        if(this.$route.params.id!==undefined){
	        	var id = this.$route.params.id;
		    	this.url += '/'+id;
		    	Axios.Configs.Admin.Get(id)
	            .then(res =>{
	            	if(!res) return false;
	                var data = res.data;
	                this.form.id = data.id;
	                this.form.name = data.name;
	                this.form.nameDisabled = true;
	                this.form.isMaster = data.isMaster ? true : false;
	                for(var i in data.roles){
	                	this.form.roles.push(data.roles[i]['id']);
	                }
	                this.checkAllGroupChange(this.form.roles);
	                
	            })
		    }
		    this.$Loading.finish();
		}
	}
</script>